<html>
<head>
</head>
<style>

 .ui li{
	list-style:none; 
	float:left;
	font-size:20;
	left:10px;
	margin-left:25px;
 }
 .ul li{
	list-style:none; 
	float:right;
	left:10px;
	margin-left:25px;
 }
 .red{color:red;}
</style>

<body>
<div id="header">
	<ul class="ui">
		<li><a href="">首页</a></li>
		<li><a href="">新闻</a></li>
		<li><a class="red" href="">投票</a></li>
	</ul>
	<ul class="ul">
		<li><a href="">登录</a></li>
		<li><a href="">注册</a></li>
		<li>欢迎 xxx 登录  ，<a href="">退出</a></li>
	</ul>
</div>
<br>
<br>
<br>
<br>
<div id="main" style="clear:both;margin-left:25px;">
	<div>
	
	<table width="100%">
		<tr>
			<td width="70%">
				
				<div>
					<p><a href="###">首页</a>>><a href="###">投票<a>>> 太阳什么颜色？</p>
				</div>
				<div>
					<h3>太阳什么颜色？</h3>
					<ul>
						<li><input type="checkbox" name="name">红色</li>
						<li><input type="checkbox" name="name">黄色</li>
						<li><input type="checkbox" name="name">绿色</li>
						<li><input type="checkbox" name="name">白色</li>
					</ul>
					<input type="submit" value="提交"> 
				</div>
				<hr>

				<h3>投票结果(投票总数：100) </h3>
				<link rel="stylesheet" href="/mvc/Static/layui/css/layui.css"  media="all">	
<script src="/mvc/Static/layui/layui.js" charset="utf-8"></script>
				红色：<br>
				<div class="layui-progress layui-progress-big" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="70%" style="width: 60%;"><span class="layui-progress-text">70%</span></div>
			<hr><br>
	
			黄色：<br>
				<div class="layui-progress layui-progress-big" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="20%" style="width: 20%;"><span class="layui-progress-text">20%</span></div><hr><br>
				绿色
				<div class="layui-progress layui-progress-big" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="5%" style="width: 5%;"><span class="layui-progress-text">5%</span></div><hr><br>
				白色
				<div class="layui-progress layui-progress-big" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="5%" style="width: 5%;"><span class="layui-progress-text">5%</span></div>

</div>
			</td>
			<td>
				<ul>
					<li> <h3>最新投票列表</h3></li>
					<li><a href="###">太阳什么颜色？</a> <span>2019年12月11日</span> </li>
					<li><a href="###">太阳什么颜色？</a> <span>2019年12月10日</span> </li>
					<li><a href="###">太阳什么颜色？</a> <span>2019年12月9日</span> </li>
					<li><a href="###">太阳什么颜色？</a> <span>2019年12月8日</span> </li>
					<li><a href="###">太阳什么颜色？</a> <span>2019年12月7日</span> </li>
				</ul>
			</td>
		</tr>
	</table>

<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  
  //触发事件
  var active = {
    setPercent: function(){
      //设置50%进度
      element.progress('demo', '50%')
    }
    ,loading: function(othis){
      var DISABLED = 'layui-btn-disabled';
      if(othis.hasClass(DISABLED)) return;
    
      //模拟loading
      var n = 0, timer = setInterval(function(){
        n = n + Math.random()*10|0;  
        if(n>100){
          n = 100;
          clearInterval(timer);
          othis.removeClass(DISABLED);
        }
        element.progress('demo', n+'%');
      }, 300+Math.random()*1000);
      
      othis.addClass(DISABLED);
    }
  };
  
  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = $(this).data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
</script>
</div>
</body>
</html>